<template>
  <div class="center-k">
	<header>
		<!-- 返回 -->
    <van-nav-bar title="成长记录" left-arrow @click-left="onClickLeft"/>
		<!-- 记录分类 -->
    <van-tabs v-model="active">
        <van-tab title="记录列表"></van-tab>
        <van-tab title="身高曲线"></van-tab>
        <van-tab title="体重曲线"></van-tab>
        <van-tab title="头尾曲线"></van-tab>
      </van-tabs>
			
		</header>
			<!-- 记录详情 -->
			<section>
      <div class="grow">
        <div class="jilu">
        <!-- 插槽插入数据 -->
				<p class="nd-k">
          <span class="top-year">2018.11.12</span>  <span class="top-day">30天</span>
				</p>	
					<van-icon class='record' name="plus" @click="add()"/>
        </div>
        <div class="tz-k">
          <p class="tzp-k">体重偏胖，头围偏大，注意控制饮食</p>
        </div>
        <div class="zs-k">
          <span  class="tall-k">身高 50 CM 体重 5KG</span>
					 <span class="he-k">头围30CM</span>
					
        </div>
      </div>
			</section>
  </div>
</template>
<script scoped>
export default {
  name:'Growhredcord',
  data() {
    return {
      active:'',
      time:'',
    };
  },
   methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    add(){
      console.log(1)
    }
  }
}
</script>
<style scoped>
	html,body,.center-k{
		height:100%
}
.center{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
header{
	height: 86px;
}

/* 返回 */
.van-nav-bar{
    height: 44px;	
}
.van-nav-bar__left .van-nav-bar__arrow{
	color:#000000;
	font-weight: bold;
}
/* 记录分类 */
.van-tabs,.van-tabs__wrap{
	height: 44px;
	line-height: 20px;
	text-align: center;
}
.van-tabs >>> .van-tabs__line{
	background: #BBBBBB;
}



/* 记录详情 */
section{
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-left:1%;
}
.grow{
  width: 98%;
  height: 110px;
  background-color: rgba(227, 227, 227, 1);
	margin-top:20px;
	display: flex;	
	flex-direction: column;
	border-radius:8px;
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 10px;
	box-sizing: border-box;
}
.jilu{
	color: rgba(102, 102, 102, 1);
	font-family: PingFangSC-regular;
	width:100%;
	height: 20px;
	display: flex;
	flex-direction:row;
	justify-content: space-between;
}
.nd-k{
	height: 20px;
	width:119px;
  display: flex;
	flex-direction:row;
	justify-content: space-between;
	font-size: 14px;
}
.tzp-k{
width: 100%;
height: 20px;
color: rgba(102, 102, 102, 1);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;
}
.record{
  font-size:16px;
  font-weight:900;
}
.zs-k{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 10px;
}
.tall-k{
	width: 77px;
	height: 45px;
	color: rgba(102, 102, 102, 1);
	font-size: 14px;
	text-align: left;
	font-family: PingFangSC-regular;
}
.he-k{
	width: 77px;
	height: 20px;
	color: rgba(102, 102, 102, 1);
	font-size: 14px;
	text-align: left;
	font-family: PingFangSC-regular;
}
</style>

